<template>
  <div class="dial" v-wechat-title="$route.meta.title">

    <div class="dial">
      <img class="background" src="../../assets/image/LuckyDrawBg.png" alt="">
      <!-- 转盘包裹 -->
      <div class="rotate">

        <img
            v-if="$route.query.type==1"
            class="dish"
            src="../../assets/image/escore_lunpan.png"
            :style="{transform:rotate_deg,transition:rotate_transition}"
        />
        <img
            v-else
            class="dish"
            src="../../assets/image/jinli_lunpan.png"
            :style="{transform:rotate_deg,transition:rotate_transition}"
        />
        <!-- 指针图片 -->
        <img class="pointer" src="../../assets/image/Pointer.png" @click="start"/>
      </div>
      <div class="prizeList">
        <div class="item" v-for="item in winnerList" :key="item.id">
          <div>
            <span>{{ item.nickName }}</span>获得了<span>{{ item.lotteryName }}</span>
          </div>
          <span>
            {{ item.createTime }}
          </span>
        </div>
      </div>
      <van-dialog class="prizeResultModal" v-model="show" style="background-color: transparent">
        <img style="width: 100%" src="../../assets/image/prizeBg.png">
        <div class="modalText">
          <div>恭喜您，抽中了 <br> Congratulations！</div>
          <div class="jaingzhi" v-show="content!=='礼盒'"></div>
          <div class="jiangzhiNum" v-show="content!=='礼盒'">
            <span>{{ content }}</span>
          </div>
          <div class="jinli" v-show="content==='礼盒'">
            <span>锦鲤奖</span>
          </div>
        </div>
        <div class="close_icon" style="margin-top: 40px;text-align: center">
          <van-icon size="1rem" name="close" @click="closeshow"/>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import {getLuckDrawUrl, getrecordUrl} from "@/api/list";
import {Toast} from "vant";

var light_timer; //灯光定时器

export default {
  name: "dial",
  data() {
    return {
      circleList: [], //原点设置
      colorCircleFirst: "#FE4D32", //圆点颜色
      colorCircleSecond: "#fff", //圆点颜色
      cat: 45, //总共8个扇形区域，每个区域约45度
      isAllowClick: true, //是否能够点击
      rotate_deg: 0, //指针旋转的角度
      rotate_transition: "transform 3s ease-in-out",//初始化选中的过度属性控制
      content: "",
      show: false,
      winnerList: [],
      intervalRequest: null
    };
  },

  created() {
    this.getList();
    this.showcircleList();
  },

  watch: {},

  mounted() {
    this.$store.commit("changeaudioUrl", "5");
    this.intervalRequest = setInterval(() => {
      this.getList();
    }, 5000);
    if (this.$route.query.type == 1) {
      document.title = "瓜分阿维塔APPE值池";
    } else {
      document.title = "瓜分锦鲤奖池";
    }

  },

  methods: {
    closeshow() {
      this.clickAudio();
      this.show = false;
      //  this.content = "";
    },
    //中将列表
    getList() {
      //=1 E值,  type=2 锦鲤
      let params = {
        pageNum: "1",
        pageSize: "10",
        type: this.$route.query.type
      };
      getrecordUrl(params).then(res => {
        if (res.code === 200) {
          this.winnerList = res.data.list;
        }
      });
    },
    //绘制圆点设置
    showcircleList() {
      let circleList = [];
      for (var i = 0; i < 16; i++) {
        circleList.push(i);
      }
      console.log("设置远点", circleList);
      this.circleList = circleList;
      this.light();
    },

    //闪动效果
    light: function () {
      var that = this;
      clearInterval(light_timer);
      light_timer = setInterval(function () {
        if (that.colorCircleFirst == "#FE4D32") {
          that.colorCircleFirst = "#fff";
          that.colorCircleSecond = "#FE4D32";
        } else {
          that.colorCircleFirst = "#FE4D32";
          that.colorCircleSecond = "#fff";
        }
      }, 300); //设置圆点闪烁的效果
    },

    start() {

      // const aduioBox = new Audio("../../assets/clickAudio.wav");
      // aduioBox.play();
      this.clickAudio();

      this.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度

      this.rotating();
    },

    rotating() {

      let params = {
        type: this.$route.query.type
      };
      getLuckDrawUrl(params).then(res => {
        if (res.code !== 200) {
          Toast(res.message);
          return;
        }

        if (!this.isAllowClick) return;
        this.isAllowClick = false;
        this.rotate_transition = "transform 3s ease-in-out";
        var rand_circle = 5; //默认多旋转5圈
        //   var winningIndex = Math.floor(Math.random() * 8); //获奖的下标   0-7   没有概率每个平均
        var winningIndex = this.set(); //设置了概率的
        var randomDeg = 360 - winningIndex * 45; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度

        var deg = rand_circle * 360 + randomDeg; //将要旋转的度数  由于是顺时针的转动方向需要用360度来减
        let content = res.data.content;
        this.content = res.data.content;
        if (params.type === "1") {
          //OK
          if (content == "50E值") {
            this.rotate_deg = "rotate(" + 1740 + "deg)";
          } else if (content == "500E值") {
            this.rotate_deg = "rotate(" + 1680 + "deg)";
          } else if (content == "200E值") {
            this.rotate_deg = "rotate(" + 1620 + "deg)";
          } else if (content == "450E值") {
            this.rotate_deg = "rotate(" + 1560 + "deg)";
          } else if (content == "400E值") {
            this.rotate_deg = "rotate(" + 1500 + "deg)";
          }//OK
          else if (content == "300E值") {
            this.rotate_deg = "rotate(" + 1800 + "deg)";
          }
        }
        //锦鲤奖池
        else {
          //OK
          if (content == "50E值") {
            this.rotate_deg = "rotate(" + 1740 + "deg)";
          } else if (content == "200E值") {
            this.rotate_deg = "rotate(" + 1620 + "deg)";
          } else if (content == "500E值") {
            this.rotate_deg = "rotate(" + 1560 + "deg)";
          } else if (content == "300E值") {
            this.rotate_deg = "rotate(" + 1500 + "deg)";
          }//OK
          else if (content == "100E值") {
            this.rotate_deg = "rotate(" + 1800 + "deg)";
          } else {
            this.rotate_deg = "rotate(" + 1680 + "deg)";
          }
        }

        // else if (content == "100E值") {
        //   this.rotate_deg = "rotate(" + 1890 + "deg)";
        // }

        // else if (content == "250E值") {
        //   this.rotate_deg = "rotate(" + 1935 + "deg)";
        // } else if (content == "150E值") {
        //   this.rotate_deg = "rotate(" + 1845 + "deg)";
        // } else if (content == "400E值") {
        //   this.rotate_deg = "rotate(" + 1800 + "deg)";
        // }
        // //锦鲤
        // else {
        //   this.rotate_deg = "rotate(" + 2045 + "deg)";
        // }
        var that = this;
        setTimeout(function () {
          that.isAllowClick = true;
          // that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
          that.rotate_transition = "";
          this.content = res.data.content;
          // Toast("恭喜您获得" + res.data.name);
          that.show = true;
        }, 3500);

      });

    },
    set() {
      var winIndex;
      var __rand__ = Math.random();
      //50
      if (__rand__ < 0.3) winIndex = 2;
      //100E
      else if (__rand__ < 0.55) winIndex = 6;
      //50
      else if (__rand__ < 0.75) winIndex = 1;
      //200
      else if (__rand__ < 0.85) winIndex = 4;
      // 500
      else if (__rand__ < 0.92) winIndex = 3;
      //250
      else if (__rand__ < 0.97) winIndex = 5;
      // 150
      else if (__rand__ < 0.99) winIndex = 7;
      // 100
      else if (__rand__ == 0.99) winIndex = 0;
      return winIndex;
    }
  },

  computed: {},
  beforeDestroy() {
    clearInterval(this.intervalRequest);
  }

};
</script>


<style scoped lang="scss">
.dial {
  //width: 100%;
  //height: 100%;
  //background-image: url("@/assets/image/LuckyDrawBg.png");
  //background-size: 100%;
  //background-repeat: no-repeat;
  .background {
    width: 100%;
  }

  .prizeList {
    position: absolute;
    top: 164vw;
    font-size: 0.4375rem;
    height: 40.5vw;
    overflow: auto;
    width: 100%;
    //margin: 0 10.6vw;
    text-align: center;

    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0 12vw 6px;
    }
  }
}

.times {
  text-align: center;
  line-height: 1rem;
  background: #fff;
  font-size: 32px;
}

.rotate {
  text-align: center;
  position: absolute;
  top: 35.5vw;
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
  left: 50%;
}

.rotate .dish {
  width: 70vw;
  height: 70vw;
}

.pointer {
  //width: 1.4rem;
  //height: 1.6rem;
  width: 26.6vw;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 圆点 */
.rotate .circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 0.16rem;
  width: 0.16rem;
  background: black;
}

.rotate .circle_0 {
  top: 0.08rem;
  left: 2.92rem;
}

.rotate .circle_1 {
  top: 0.28rem;
  left: 4.05rem;
}

.rotate .circle_2 {
  top: 0.86rem;
  left: 4.95rem;
}

.rotate .circle_3 {
  top: 1.85rem;
  left: 5.65rem;
}

.rotate .circle_4 {
  top: 2.85rem;
  right: 0.1rem;
}

.rotate .circle_5 {
  bottom: 1.89rem;
  right: 0.29rem;
}

.rotate .circle_6 {
  bottom: 0.96rem;
  right: 0.88rem;
}

.rotate .circle_7 {
  bottom: 0.34rem;
  right: 1.76rem;
}

.rotate .circle_8 {
  bottom: 0.06rem;
  right: 3.06rem;
}

.rotate .circle_9 {
  bottom: 0.28rem;
  left: 1.9rem;
}

.rotate .circle_10 {
  bottom: 0.96rem;
  left: 0.88rem;
}

.rotate .circle_11 {
  bottom: 1.82rem;
  left: 0.28rem;
}

.rotate .circle_12 {
  top: 2.9rem;
  left: 0.1rem;
}

.rotate .circle_13 {
  top: 1.9rem;
  left: 0.28rem;
}

.rotate .circle_14 {
  top: 1rem;
  left: 0.86rem;
}

.rotate .circle_15 {
  top: 0.32rem;
  left: 1.76rem;
}

.close_icon {
  margin-top: 40px;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  color: #f9f9f9;
}

.modalText {
  position: absolute;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  .jaingzhi {
    width: 50px;
    height: 50px;
    border-radius: 8px 8px 8px 8px;
    background-image: url("@/assets/imgs/Ebg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 10px auto 0;

  }

  .jinli {
    width: 100px;
    height: 100px;
    background-image: url("../../assets/image/jinli.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: auto;
    line-height: 170px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #050505;
  }

  .jiangzhiNum {
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #050505;
    margin-top: 10px;
  }
}
</style>

